<template>
  <div class="appSelect">
    <el-dialog :visible.sync="model.visable" title="绑定资源" :close-on-click-modal="false" :show-close="false">
      <div class="dialog-body">
        <div class="srh-row">
          <search-input placeholder="资源名称" @search="searchChange" />
        </div>

        <div class="app-header">
          <div class="tab-btns">
            <div
              v-for="(item, i) in list"
              :key="item.group_id"
              class="tab-btn"
              @click="tabChange(item, i)"
              :class="{active: active === i}"
            >
              {{ item.group_name }}
            </div>
          </div>
        </div>
        <div class="app-list">
          <el-scrollbar class="scroll-bar">
            <el-row>
              <el-col
                v-for="(item, i) in appList"
                :key="i"
                class="media-box app-box"
                :class="{
                  active: item.checked
                }"
              >
                <img
                  v-show="item.checked"
                  src="~assets/img/tick.png"
                  class="tick"
                />
                <div class="media-con app-con" @click="doSelect(item, i)">
                  <div class="media-pic rs-pic">
                    <img :src="item.res_icon" />
                  </div>
                  <el-tooltip
                    effect="dark"
                    :content="item.res_name"
                    placement="left"
                  >
                    <div class="media-name">
                      {{ item.res_name }}
                    </div>
                  </el-tooltip>
                  
                  <div class="media-row">
                    <div class="key">
                      上传人
                    </div>
                    <el-tooltip effect="dark" :content="item.user_name" placement="left">
                      <div class="val">
                        {{item.user_name}}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-if="false" class="media-row">
                    <div class="key">
                      更新时间
                    </div>
                    <el-tooltip effect="dark" :content="item.update_time" placement="left">
                      <div class="val">
                        {{item.update_time}}
                      </div>
                    </el-tooltip>
                  </div>
                  <div class="media-row">
                    <div class="key">
                      对象
                    </div>
                    <el-tooltip effect="dark" :content="visibilitys.find(v => v.key === item.visibility).value" placement="left">
                      <div class="val">
                      {{visibilitys.find(v => v.key === item.visibility).value}}
                      </div>
                    </el-tooltip>
                  </div>
                  
                  <div class="media-row">
                    <div class="key">
                      备注
                    </div>
                    <el-tooltip effect="dark" :content="item.remark" placement="left">
                      <div class="val">
                        {{item.remark}}
                      </div>
                    </el-tooltip>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-scrollbar>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api'
import { visibilitys } from '@/consts/codesMap'
export default {

  props:{
    resource_ids: {
      type: Array
    },
    mode: {
      type: String,
      default: 'more'
    }
  },
  data(){
    return {
      search: '',
      list: [],
      appList: [],
      active : 0,
      model:{
        visable: true,
        type: 'add'
      },
      visibilitys
    }

  },

  computed: {
    selectedList() {
      let checks = []
      this.list.forEach(item => {
        item.group.forEach(g => {
          if (g.checked) {
            checks.push(g)
          }
        })
      })
      return checks
    }
  },
  methods: {
    tabChange(item, i) {
      this.active = i;
      if (this.search) {
        this.appList = this.list[i].group.filter(item => {
          if (item.res_name.includes(this.search)) {
            return item
          }
        })
      } else {
        this.appList = item.group
      }
    },
    
    searchChange(e) {
      this.search = e
      let i = this.active
      if (e) {
        this.appList = this.list[i].group.filter(item => {
          if (item.res_name.includes(e)) {
            return item
          }
        })
      } else {
        this.appList = this.list[i].group
      }
    },

    doSelect(child, i) {
      if (this.mode === 'more') {
        child.checked = !child.checked;
        this.$set(this.appList, i, child);
      } else {
        this.list.forEach((item, index) => {
          if (this.active != index) {
            item.group.forEach(g => {
              g.checked = false
            })
          }
        })
        this.appList.forEach((item, index) => {
          item.checked = item.checked ? false : index === i
        })
        
      }
    },

    cancel() {
      this.$emit('cancel')
    },

    sure() {
      this.$emit('sure',this.selectedList)
    },

    
    async chooseList() {
      const { code, data } = await api.license(this).chooseResourceList();
      if (code == 0) {
        this.list = data.map((item) => {
          item.group.forEach((g) => {
            g.checked = this.resource_ids.includes(g.res_id);
          });
          return item;
        });
        this.appList = this.list[0].group
      }
    },
  },
  created(){
    this.chooseList()
  }
}
</script>

<style lang="stylus">

</style>